<template>
    <el-dialog v-model="show" title="商家申请记录" width="980" align-center>
        <div class="content">
            <div class="title">微信子商户申请记录</div>
            <div class="desc">
                <span>平台初审通过后，客服会提交给微信支付官方审核，审核通过后将已邮件形式发送到你申请的联系人邮箱中。</span>
                <el-button round :icon="Refresh">刷新</el-button>
            </div>
            <div class="table">
                <el-table :data="tableData" style="width: 100%;">
                    <el-table-column prop="applyTime" label="申请日期" />
                    <el-table-column prop="name" label="子商户简称" />
                    <el-table-column prop="tel" label="联系人电话" />
                    <el-table-column prop="email" label="联系人邮箱" />
                    <el-table-column prop="custom" label="子商户号" />
                    <el-table-column prop="status" label="申请状态" width="90px" />
                    <el-table-column prop="" label="操作" width="80px">
                        <template #default="scope">
                            <!-- <el-button  size="small"  type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                            <span style="color:#0071BB;cursor: pointer;">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 底部分页 -->
                <div class="page_number">
                    <el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize"
                        :disabled="!pager.total" layout="prev, pager, next, jumper,total" :total="pager.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>
            <div class="title">小微商户申请记录</div>
            <div class="desc">
                <span>平台初审通过后，客服会提交给微信支付官方审核，审核通过后将已邮件形式发送到你申请的联系人邮箱中。</span>
                <el-button round :icon="Refresh">刷新</el-button>
            </div>
            <div class="table">
                <el-table :data="tableData" style="width: 100%;">
                    <el-table-column prop="applyTime" label="申请日期" />
                    <el-table-column prop="name" label="商户简称" />
                    <el-table-column prop="tel" label="门店名称" />
                    <el-table-column prop="email" label="小微商户号" />
                    <el-table-column prop="status" label="申请状态" />
                    <el-table-column prop="" label="操作" width="80px">
                        <template #default="scope">
                            <span style="color:#0071BB;cursor: pointer;">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 底部分页 -->
                <div class="page_number">
                    <el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize"
                        :disabled="!pager.total" layout="prev, pager, next, jumper,total" :total="pager.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submit()" color="#0071bb">确定</el-button>
                <el-button @click="close()">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { defineProps, defineEmits } from 'vue';
const emit = defineEmits(['close', 'submit']);
const props = defineProps<{ type: number, formData: any }>();
// 取消
const close = () => {
    emit('close')
}
const submit = () => {
    emit('submit')
}
const tableData = ref()
// 初始化表格数据
const initData = () => {
    tableData.value = [
        {
            id: 1,
            applyTime: '2024-04-22 11:50:25',
            name: '常熟市直鑫商行售货机',
            tel: '13306236880',
            email: '970821793@qq.com',
            custom: '13602545555',
            status: '已驳回'
        }
    ]
}
const show = ref<boolean>(true)
// 分页
const pager = ref({
    currentPage: 1,
    pageSize: 10,
    total: 10,
})
// 改变pageSize
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
// 改变当前页码 currentPage
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
onMounted(() => {
    initData()
})
</script>

<style lang="scss" scoped>
.desc {
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    align-items: center;
    color: #808080;
    margin: 10px 0;
}

.title {
    color: #4D4D4D;
    font-size: 16px;
    font-weight: 500;
}

.table {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page_number {
    align-self: center;
}



.dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
}
</style>